<template>
	<view class="details">		
			<view class="zuo" >
				<image class="img" :src="imgUrl+'/zuo.png'" mode="" @click="jian()"></image>
			</view>
			<view class="you" >
				<image class="img" :src="imgUrl+'/you.png'" mode="" @click="jia()"></image>
			</view>
		<view >
		<view class="uni-margin-wrap">
		
			<swiper class="swiper" :current="index"  >
				<swiper-item v-for="(item,index) in tabData">
					<view class="swiper-item uni-bg-red">
						<view class=" JobDetails-title" 
						:style="{
							'background-image': `url(${imgUrl}/bsijing.png)`
						}"
						>
					<image style="width: 700rpx;border-radius: 20rpx;" @load="imageLoad" :style="{
						height:imgHeight+'rpx'
					}" mode="aspectFit" :src="item.get_company.company_show_logo" v-if='item.get_company.company_show_logo' class="im"></image>
							<view class="borde-padd-24">
								<view class="flex sun-list mott flex-line-height" style="white-space:pre-wrap;">
									<view style="padding-left: 20rpx;">
										<view class="" style="font-size: 43rpx;color: #0D0E0F; font-weight: 600;">
											{{item.get_company.company_name}}
										</view>
										
									</view>
								</view>
								<view class="JobDetails-conter">
									<view class="title">{{item.job_name}}</view>
									<view class="tim" v-if="item.min_wage>0">薪资：¥ {{item.min_wage}}-{{item.max_wage}}</view>
									<view class="tim" v-else>薪资：面议</view>
						<view class="imconterLius">
							<view class="label flex-wrap">
								<view  class="label-list"><b>专业要求：</b>{{item.category_cn}}</view>
							</view>
						</view>
					
						<view class="label flex-wrap">
							
						<view class="label-li" v-if='item.nature_cn' style="border: 2rpx solid chocolate; color:chocolate;">{{item.nature_cn}}</view>
						<view class="label-li" v-if='item.experience_cn && item.experience_cn!="不限"' style="border: 2rpx solid forestgreen;color:forestgreen;">{{item.experience_cn}}</view>
						<view class="label-li" v-if='item.education_cn && item.education_cn != item.experience_cn' style="border: 2rpx solid steelblue; color: steelblue;">{{item.education_cn}}</view>
						<view class="label-li" v-if='item.amount>0' style="border: 2rpx solid cadetblue; color: cadetblue;">招{{item.amount}}人</view>
						<view v-if='item.get_company.company_nature_cn' class="label-li" style="border: 2rpx solid cadetblue; color: #E8A03D;">{{item.get_company.company_nature_cn}}</view>
							
						</view>
					
									<view class="imconterLius">
										<image class="im" :src="imgUrl+'/fangi.png'" mode=""></image>
										{{item.area_cn}}
									</view>
									<view class="imconterLius">
										<image class="im" :src="imgUrl+'/weizhaw.png'" mode=""></image>
										{{item.get_company.address}}
									</view>
									<view class="imconterLius" v-if="item.end_time">
										<image class="im" :src="imgUrl+'/shiajidn.png'" mode=""></image>
										{{item.start_time}} 至 {{item.end_time}}
									</view>
									<view class="imconterLius" v-else>
										<image class="im" :src="imgUrl+'/shiajidn.png'" mode=""></image>
										{{item.start_time}} 至 长期
									</view>
								</view>
							</view>
							
						</view>
						<view class="borde-padd-24">
							<view class="sun-ttle">职位介绍</view>
							<view class="flex sun-list mott" style="white-space:pre-wrap; color: #0D0E0F;" v-html="item.contents">
							</view>
							<view class="" style="padding-bottom: 280rpx;"></view>
						</view>
						<view class="JobDetails borde-padd-24 flex-height-between">
							<view class="icon-style flex-wrap "  @click="jobcollect()" >
								<image class="content-cs" v-if="!iscollect" src='https://zhizhijiaoyu001.oss-cn-shanghai.aliyuncs.com/static/dian.png' mode=""></image>
								<image class="content-cs" v-if="iscollect" src="https://zhizhijiaoyu001.oss-cn-shanghai.aliyuncs.com/static/dianji.png" mode=""></image>
								<text class="size">收藏</text>
							</view>
							<view v-if="item.isvip==1" style="display: flex; flex-wrap: wrap;">
								<view v-if="item.laiyuan"  class="btn2" style="margin-right: 30rpx;" @click="copyUrl(item.laiyuan)">网申链接</view>
								<view v-if="item.get_company.company_special_url" class="btn2" @click="copyUrl(item.get_company.company_special_url)">公告链接</view>
							</view>
							<view v-else class="btn" @click="Tankuang=true">
								申请职位
							</view>
						</view>			
					</view>
				</swiper-item>
	
			</swiper>
		</view>
		<conmenMens v-if="Tankuang" @onHide1='onHide1'></conmenMens>				
						
		</view>
	</view>

</template>

<script>
	// /api/job/detail
	import conmenMens from "../../components/conmenMens.vue"
	import footerTer from "../../components/footer.vue"
	import {
		Request
	} from '@/utils/request.js'
	// api/special/get_grade_cate
	export default {
		components:{
			conmenMens,
			footerTer
		},
	    data() {
	        return {
	            indicatorDots: false,
				tabData:[],
				imgUrl:this.imgUrl,
				special_list:[],
				jobConList:[],
				Tankuang:false,
				tabIndex:0,
				iscollect:false,
				tabId:'',
				index:0,
				indexCount:0,
	        }
	    },
		onLoad({id}) {
			this.joblist(id);
			this.tabId=id;
		},
	    methods: {
			imageLoad(e){
				const originalWidth = e.detail.width;
				    const originalHeight = e.detail.height;
				    const containerWidth = wx.getSystemInfoSync().windowWidth; // 获取屏幕宽度
				    const ratio = originalWidth / originalHeight;
				    const imgHeight = containerWidth / ratio;
				    this.imgHeight = imgHeight;
			},
			jia(){
				if(this.index==6){
					this.index=0;
				}else{
					this.index=this.index+1;					
				}
			},
			jian(){
				if(this.index==0){
					this.index=6;
				}else{
					this.index=this.index-1;					
				}
			},
			goPages(path){
				uni.navigateTo({
					url:path
				})
			},
			onHide1() {
					this.Tankuang = false;		
				},
			goPagesConste(){
				// uni.navigator.back();
				uni.navigateBack({ delta: 1 })
			},
			// navigator.back();
			onmakePhoneCall(){
				uni.makePhoneCall({
					phoneNumber: '19153191198' //仅为示例
				});
			},
			joblist(id){
				Request('job/list',{
					tabactive:id,
					page:1,
					rand:1,
				}).then(({data}) => {
					const tdata = data || [];
					this.jobConList = tdata;
					tdata.map((item,index)=>{
						if(index<=6){
							this.jobdetail(item.id);
						}
					})
				})
			},
			jobcollect(){
				Request("job/jobcollect",{
					 id:this.tabId,
				 },'post').then((res) => {
					 this.iscollect=!this.iscollect
				})  
			},
	
	       jobdetail(tabId){
			   Request('job/detail',{
				   id:tabId
			   }).then(data => {
			   	const tdata = data || [];
			   	this.tabData.push(tdata);
			   })
		   },
		   copyUrl(data){
		   	uni.setClipboardData({
		   		data: data,
		   		success: function () {
		   			uni.showToast({
		   				title: '复制成功，请到浏览器打开',
		   				icon: 'none'
		   			  });
		   			console.log('success');
		   		}
		   	});
		   	
		   }
	    },
		
	}
</script>

<style scoped>
	.zuo{
		height: 100vh;
		position: fixed;
		top:49.5vh;
		left: 0;
		z-index: 9;
	}
	.you{
		height: 100vh;
		position: fixed;		
		top:49.5vh;
		right: 0;
		z-index: 9;
	}
	.img{
		width: 60rpx;
		height: 60rpx;
		animation: rotateInfinite 5s infinite linear;
	}
	
	/* 定义关键帧 */
	@keyframes moveRight {
	  0% {
	    transform: translateX(0);
	  },
	  10% {
	    transform: translateX(0);
	  }
	  50% {
	    transform: translateX(0);
	  }
	  80% {
	    transform: translateX(0);
	  }
	  100% {
	    transform: translateX(-100%);
	  }
	}
	 

	.swiper{
		height: 100vh;
		overflow-x: scroll;
	}
	.swiper-item {
		height: 100vh;
		overflow: scroll;
	}
	.header{
		height: 90rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		position: relative;
		width: 100%;
	}
	.header .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		text-align: center !important;
		width: 100%;
		color: #0D0E0F;
		margin: 0 auto;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.header-left {
		position: absolute;
		left: 24rpx;
		top: 50%;
		transform: translate(0,-50%);
	}
	.header-right{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3B5EEC;
		font-style: normal;
		text-transform: none;
	}
	.header-right {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translate(0,-50%);
	}
	.header-right .img{
		width: 32rpx;
		height: 32rpx;
		margin-right: 5rpx;
	}
	.JobDetails-title{
		/* height: 376rpx; */
		padding-top: 20rpx;
		width: 100%;
		background-size: 100% 376rpx;
		background-repeat: no-repeat;
	}
	.imconterLius{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		text-transform: none;
	}
	.imconterLius .im{
		width: 28rpx;
		margin-right: 20rpx;
		height: 28rpx;
	}
	.JobDetails-conter{
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 20rpx 1rpx rgba(67,93,228,0.14);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.details .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		text-transform: none;
	}
	.details .tim{
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 32rpx;
		color: #ff0000;
		text-align: left;
		margin-bottom: 24rpx;
		font-style: normal;
		text-transform: none;
	}
	.details .funLoufa{
		width: 100%;
		height: 150rpx;
		box-sizing: border-box;
		padding: 38rpx 25rpx;
		background-size: 100% 100%;
	}
	.details  .funLoufa .icon{
		width: 28rpx;
		height: 28rpx;
		max-width: 28rpx;
		min-width: 28rpx;
		margin-top: 5rpx;
		margin-right: 12rpx;
	}
	.details  .funLoufa .omeTnge{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	
	.details .funLoufa .gongsDel{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.sun-ttle{
		margin-top: 40rpx;
		margin-bottom: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.sun-list{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #8F9294;
		line-height: 48rpx;
		text-align: left;
		font-style: normal;
		border-bottom: 1rpx solid #E1E4E8;
		text-transform: none;
		padding-bottom: 32rpx;
		margin-bottom: 26rpx;
	}
	/* .mott{
		margin-bottom: 186rpx;
	} */
	.sun-list .l{
		margin-right: 24rpx;
	}
	.sun-list .r{
		color: #646669;
	}
	.JobDetails{
		background: #FFFFFF;
		position: fixed;
		display: flex;
		
		padding:10rpx 24rpx 50rpx 24rpx;
		bottom: 0rpx;
		box-sizing: border-box;
		left: 0;
		width: 100%;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.JobDetails .btn{
		width: 562rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #3B5EEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.JobDetails .btn2{
		width: 202rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #3B5EEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	
	.label-li{
		height: 48rpx;
			padding: 0 16rpx;
			background: #F7F8FA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			margin: 18rpx 0;
			margin-right: 16rpx;
			text-align: center;
			line-height: 48rpx;
			font-style: normal;
			text-transform: none;
	}
	.icon-style{
		width: 70rpx;
		justify-content: center;
	}
	.icon-style .content-cs{
		width: 40rpx;
		height: 40rpx;
	}
	.icon-style .size{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0D0E0F;
		font-style: normal;
		text-transform: none;
	}
</style>